<template>
	<view class="search">
		<!-- #ifdef MP -->
		<view class="status_bar"></view>
		<!-- #endif -->
		<u-sticky :offsetTop="statusBarHeight">
			<view class="searchTop">
				<u-search @search="search" @custom="goback" @clear="clearSearch" :focus="true" placeholder="输入关键字" v-model="keyword" actionText="取消"></u-search>
			</view>
		</u-sticky>

		<!-- 搜索历史 -->
		<textHistory :typeSty="type" @changeSearchList="changeSearchList" ref="textHistory"></textHistory>
		<!-- 搜索的内容 -->
		<!-- 组件-->
		<!-- <view class="searchContent">
      <component :is="currentComponent" ref="componentRef"></component>
    </view> -->
	</view>
</template>

<script>
import { mapState } from 'vuex';
import pageMixin from '@/mixins/pageMixin';
import textHistory from './components/textHistory.vue';
// import dataItemSearch from '@/pages/medical/search/dataItemSearch.vue'; //搜索医院或者医生
// import orderSearch from '@/pages/medical/search/orderSearch.vue'; //搜索 问诊订单
// import dataItem from '@/components/medical/components/dataItem.vue';
export default {
	mixins: [pageMixin],
	components: { 
		textHistory
		 // dataItem, 
		 // orderSearch 
		 },
	data() {
		return {
			currentComponent: '', //组件名称
			//距离顶部距离
			statusBarHeight: 0,
			keyword: '',
			type: '' //类型
		};
	},
	onLoad(options) {
		if (options.keyword) this.keyword = options.keyword;
		if (options.type) this.type = options.type;
		// 组件名字
		// switch (this.type) {
		// 	case 'dataItemSearch':
		// 		this.currentComponent = 'dataItemSearch'; //搜索医生\医院
		// 		break;
		// 	case 'orderSearch':
		// 		this.currentComponent = 'orderSearch'; //搜索问诊订单
		// 		break;
		// }
	},
	created() {
		// this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
	},
	methods: {
		search() {
			if (!this.keyword) return uni.$u.toast('请输入关键词');
			// 加入历史
			this.$refs.textHistory.unshiftListt(this.keyword);
			//组件搜索
			// this.$refs.componentRef.getSearchInfo(this.keyword);
			if (this.type == 'drug') {
				this.toPage(`public/search?keyword=${this.keyword}`);
			} else this.toPage(`circle/circleSearch?keyword=${this.keyword}`);
			this.keyword = '';
		},
		changeSearchList(text) {
			console.log(text, 'text============');
			this.keyword = text;
		},
		goback() {
			uni.navigateBack({
				delta: 1
			});
		},
		clearSearch() {}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fff;
}
::v-deep .u-search__content {
	border-radius: 16rpx !important;
	height: 72rpx;
	line-height: 72rpx;
	background-color: #f5f7fa !important;
}

::v-deep .u-search__action {
	font-size: 32rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #666666;
}

::v-deep .u-search__content__input {
	font-size: 28rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #999999;
	background-color: #f5f7fa !important;
}

// .status_bar {
//   height: var(--status-bar-height);
//   width: 100%;
//   background-color: #fff;
//   position: fixed;
//   top: 0;
//   z-index: 99999;
// }
// .search {
//   // height: 100vh;
//   background-color: #fff;
//   padding-top: var(--status-bar-height);
// }
.searchTop {
	padding: 10rpx 24rpx 0;
	display: flex;
	justify-content: left;
	align-items: center;

	::v-deep .u-search__content {
		background-color: rgb(245, 247, 250) !important;
	}
}

// .footer-nav {
//   overflow: hidden;
// }
</style>
